<template>
  <div class="index-breadcrumb">
    <!--    <i class="iconfont icondaohang icon"></i>-->
<!--    <h2 class="title">位置：</h2>-->
    <ul class="list">
      <li
        class="item"
        v-for="(item, index) in breadcrumbList"
        :key="index"
        :class="{
          hover: item.path || item.showStatus,
          active: index === breadcrumbList.length - 2,
          active1: index === 0 && item.title === '项目管理1' && breadcrumbList[1].title === '项目管理',
        }"
        @click="goPage(item)"
      >
        <span>{{ item.title }}</span>
      </li>
      <!--      <li class="item hover">智能运维</li>-->
      <!--      &lt;!&ndash;      <li class="symbol-item">&gt;</li>&ndash;&gt;-->
      <!--      <li class="item active">用户管理</li>-->
    </ul>
    <div v-if="isShow" @click="$router.back()" class="back">返回</div>
  </div>
</template>

<script>
export default {
  name: "IndexBreadcrumb",
  props: {
    breadcrumbList: Array,
    isShow: Boolean
  },
  methods: {
    goPage(item) {
      if (item && item.path) {
        if(item.query){
          this.$router.push({
            path: item.path,
            query: item.query
          });
        }else{
          this.$router.push({
            path: item.path
          });
        }
      }
      if(item && item.showStatus){
        this.$emit("showStatus", true)
      }
    }
  }
};
</script>

<style lang="sass" scoped>
.index-breadcrumb
  //height: 54px
  //@include container
  display: flex
  align-items: center
  justify-content: space-between
  //padding: 0 30px
  margin-bottom: 20px
  .back
    width: 64px
    height: 36px
    background: #FFFFFF
    border-radius: 4px
    border: 1px solid #D7DCE5
    font-size: 14px
    color: #8092AE
    line-height: 36px
    text-align: center
    cursor: pointer
  .icon
    color: #818797
    margin-right: 4px
  .title
    color: #595A60
  .list
    display: flex
    align-items: center
    .item
      color: #595A60
      margin-right: 20px
      position: relative
      &.hover
        transition: all .3s
        cursor: pointer
        &:hover
          color: $main-color
      &.active
        color: $main-color
      &.active1
        display: none
      &:not(:last-child)::after
        content: "/"
        position: absolute
        right: -15px
        color: #595A60
        width: 10px
        text-align: center
        pointer-events: none
    //.symbol-item
    //  margin: 0 6px
    //  color: #595A60
</style>
